<template>
	<view class="content-box">
		<view style="width: 100%;">
			<u-search 
			placeholder="请输入项目名" 
			v-model="keyword" 
			shape="square" 
			:showAction="true"
			:animation="true"></u-search>
		</view>
		
		<u-list
			@scrolltolower="scrolltolower"
			style="margin-top: 16px; margin-bottom: 50px;">
			<u-list-item
				v-for="(item, index) in indexList"
				:key="index">
				<view class="content-box-center apps-type-box">
					<view style="width: 100%; margin-top: 8px; margin-left: 16px;">
						<view>{{ item.name }}</view>
					</view>
					<view class="content-box-row-start-wrap" style="margin-top: 8px;">
						<view class="content-box-center apps-item-box">
							<u--image
								src="https://cdn.uviewui.com/uview/album/1.jpg" 
								shape="square" 
								width="50"
								height="50"
								radius="5px">
							</u--image>
							<view>接口</view>
						</view>
					</view>
				</view>
			</u-list-item>
		</u-list>
	</view>
</template>

<script>
	export default {
		name: 'AppsPage',
		data() {
			return {
				keyword: "",
				indexList: [
					{
						name: "常用应用",
						type: "recently",
					},
					{
						name: "智能工具",
						type: "ai",
					},
				]
			}
		},
		methods: {
			scrolltolower() {
				
			}
		}
	}
</script>

<style>
	.apps-type-box {
		background-color: aliceblue;
		margin-left: 0px;
		margin-right: 0px;
		margin-bottom: 16px;
		margin-top: 0px;
		border-radius: 5px;
	}
	
	.apps-item-box {
		flex: 1;
		height: 80px;
		margin: 0 5px 5px 0;
		/* background-color: #999; */
		width: calc((100% - 30px) / 3);  
		min-width: calc((100% - 30px) / 3);
		max-width: calc((100% - 30px) / 3);
		&:nth-child(3n) {
		  margin-right: 0;
		}
	}
</style>
